<template>
  <div class="static-article">
    <!-- 面包屑导航 -->
    <div class="breadcrumbs">
      <span to="/">首页</span> > <span to="/news">柬埔寨新闻</span> >
      <span>正文</span>
    </div>

    <!-- 主内容区 -->
    <article>
      <!-- 标题 -->
      <h1 class="title">柬埔寨2023年旅游业复苏强劲 国际游客突破400万</h1>

      <!-- 文章元信息 -->
      <div class="meta">
        <span class="source">来源：柬埔寨旅游部</span>
        <span class="date">发布日期：2023年11月15日</span>
        <span class="views">阅读量：12,345</span>
      </div>

      <!-- 封面图 -->
      <img
        src="@/assets/images/tnaot_img_cn.png"
        alt="柬埔寨旅游业"
        class="cover"
      />

      <!-- 正文内容 -->
      <div class="content">
        <p>柬埔寨旅游部最新统计数据显示...</p>

        <h2>主要旅游城市数据</h2>
        <ul>
          <li>金边：接待游客150万人次</li>
          <li>暹粒：接待游客180万人次</li>
          <li>西港：接待游客70万人次</li>
        </ul>

        <div class="quote">
          <blockquote>
            "我们预计2024年旅游业将恢复至疫情前水平的80%"
            <cite>柬埔寨旅游大臣 唐坤</cite>
          </blockquote>
        </div>
      </div>

      <!-- 相关新闻 -->
      <div class="related-news">
        <h3>相关阅读</h3>
        <ul>
          <li>吴哥窟门票收入创新高</li>
          <li>西哈努克市新机场正式启用</li>
          <li>柬埔寨新增3处世界文化遗产</li>
        </ul>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '柬埔寨旅游业复苏强劲 - 柬埔寨头条',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content:
            '柬埔寨旅游部公布2023年旅游数据，国际游客突破400万人次，主要旅游城市接待量显著增长'
        }
      ]
    };
  }
};
</script>

<style scoped>
.static-article {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
}

.breadcrumbs {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.title {
  font-size: 2rem;
  color: #1a365d;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.meta {
  display: flex;
  gap: 20px;
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.cover {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin: 20px 0;
}

.content {
  line-height: 1.8;
  font-size: 1.1rem;
  color: #333;
}

h2 {
  font-size: 1.5rem;
  color: #2b6cb0;
  margin: 2rem 0 1rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}

ul {
  padding-left: 2rem;
  margin: 1rem 0;
}

li {
  margin: 0.8rem 0;
  position: relative;
}

.quote {
  background: #f8f9fa;
  padding: 1.5rem;
  border-left: 4px solid #2b6cb0;
  margin: 2rem 0;
}

blockquote {
  margin: 0;
  font-style: italic;
  color: #666;
}

cite {
  display: block;
  margin-top: 1rem;
  color: #999;
}

.related-news {
  margin-top: 3rem;
  padding: 1.5rem;
  background: #f5f7fa;
  border-radius: 8px;
}

.related-news h3 {
  font-size: 1.3rem;
  color: #1a365d;
  margin-bottom: 1rem;
}

.related-news a {
  color: #2b6cb0;
  text-decoration: none;
}

.related-news a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .static-article {
    padding: 15px;
  }

  .title {
    font-size: 1.6rem;
  }

  .cover {
    height: 250px;
  }

  .meta {
    flex-wrap: wrap;
    gap: 10px;
  }
}
</style>
